<script setup lang="ts">
import type {SlideButtonGroup} from "@/typex/modules/ui/tab-buttonx.ts";
import {useRouter} from "vue-router";
import type {BasicInfo} from "@/typex/modules/item";
import {onMounted} from "vue";
import Artplayer from "@/page/ArtPlayer.vue";
import ArtPlayer from "@/page/ArtPlayer.vue";

// const uuu = "http://192.168.8.10:9991/api/v1/vod/video/parse/m3u8"
onMounted(() => {
    // axios.post('http://192.168.8.10:9991/api/v1/vod/video/parse/m3u8', {
    //     "id": 0,
    //     "from": "/home/debi/Music/wb.mp4",
    //     "hlsTime": 5,
    //     "overwrite": true,
    //     "bit_rate": "1500k"
    // }).then(resp=>{
    //
    //     console.log(resp)
    // })


})
const icon = "bi bi-tag"
const buttonGroup: Array<SlideButtonGroup> = [
    {
        name: "menu.dashboard",
        children: [
            {name: "menu.dashboard", path: "/dashboard", icon: icon},
            {name: "menu.knowledge", path: "/knowledge", icon: icon},]
    },
    {
        name: "menu.subscribe",
        children: [
            {name: "menu.buysubs", path: "/buysubs", icon: icon},
            {name: "menu.mysubs", path: "/mysubs", icon: icon},]
    },
    {
        name: "menu.order",
        children: [
            {name: "menu.order", path: "/order", icon: icon},
            {name: "menu.invite", path: "/invite", icon: icon},]
    },
    {
        name: "menu.user",
        children: [
            {name: "menu.profile", path: "/profile", icon: icon},
            {name: "menu.flow", path: "/flow", icon: icon},]
    },
]

const icons = "http://p2.music.126.net/UrBS_0TAJ1u5ggGtcORnow==/109951168969454113.jpg?param=140y140"
const language: BasicInfo[] = [
    {
        id: 0,
        name: "en",
        value: "en",
        icon: icons
    },
    {id: 1, name: "zh", value: "zh", icon: icons},
    {id: 1, name: "tw", value: "tw", icon: icons},
    {id: 1, name: "jp", value: "jp", icon: icons},
];

const router = useRouter();

const handleMenuClick = async (path: string) => {
    await router.push({path: path});
};

const getInstance = (art) => {
    console.info(art);
}
const option = {
    url: "udp://@192.168.20.4:1234",
}
const style = {
    width: "600px",
    height: "400px",
    margin: "60px auto 0",
}
</script>
<template lang="pug">
.main
        //ArtPlayer(@get-instance="getInstance" :option="option" :style="style"  )
        //.slidebar
        //    Language(:language="language" ) Language
        //    IconList(:buttons="language" ) IconList
        //    SlideBar(:buttons="buttonGroup" :handel="handleMenuClick" )
        //router-view.container
</template>

<style scoped lang="scss">
.main {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    //background-image: url("public/background.jpg");
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    //opacity: 0.5;
}

.slidebar {
    width: 17%;
    min-width: 120px;
    margin: 5px;
    height: 100%;
    background: #ffffff;
    border: 1px none gray;
    border-right-style: dashed;
    box-sizing: inherit;
    list-style: none;
}

.container {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100vh;
    transition: margin-left 0.3s;
    background-color: white;
    overflow-x: hidden;
}
</style>